<template>
  <div class="mvplayer" v-show="MvDice" ref="videobxo">
    <video
      preload="auto"
      :src="mv.url"
      width="100%"
      @loadeddata="FullScreen"
      ref="video"
    ></video>
    <!-- 进度条 -->
    <div class="range">
      <div class="bar">
        <span class="timeLeft">{{ timeLeft | playerTime }}</span>
        <van-slider
          @change="sliderchange"
          v-model="value"
          inactive-color="#514E4C"
          bar-height="4px"
          active-color="#ee0a24"
        >
          <template #button>
            <div class="custom-button"></div>
          </template>
        </van-slider>
        <span class="timeRight">{{ timeRight | playerTime }}</span>
      </div>
    </div>
    <!-- 控件 -->
    <div class="buttons">
      <div
        :class="['iconfont', iconplay ? 'icon-checkbox-full' : 'icon-zanting']"
        @click.stop="toggleplay"
      ></div>
      <div
        class="iconfont icon-aixin"
        @click="CollectionMV"
        v-show="stars == 1"
      ></div>
      <div
        class="iconfont icon-aixin2"
        @click="delCollectionMV"
        v-show="stars == 2"
      ></div>
      <div class="iconfont icon-caidan" @click="showcom = !showcom"></div>
    </div>
    <div class="comment" v-show="showcom">
      <div
        class="left iconfont icon-fangxianganniu2"
        @click="showcom = !showcom"
      ></div>
      <ul>
        <li v-for="(ele, index) in comments" :key="index">
          <div class="imgbox">
            <img :src="ele.user.avatarUrl" alt="" />
          </div>
          <span class="one">{{ ele.user.nickname }}</span>
          <p>{{ ele.content }}</p>
          <span class="two">{{ ele.timeStr }}</span>
        </li>
      </ul>
    </div>
    <div class="back iconfont icon-fangxianganniu1" @click.stop="trun"></div>
  </div>
</template>

<script>
import { Toast } from "vant";
import {
  getmvplay,
  getCollectionmvplay,
  getMVComment,
} from "../../api/mvplayer";
export default {
  props: ["mvplayerId"],
  data() {
    return {
      mv: "http://vodkgeyttp8.vod.126.net/cloudmusic/053b/core/cc8e/fba83f305da2ba4a223bbac476754ef5.mp4?wsSecret=a000bfc94fc15dc5358e99abd9a5d7bd&wsTime=1638709478",
      MvDice: true, //显示隐藏
      iconplay: true, //播放按钮
      value: 0, //滚动条 0-100
      timeRight: 0, //右侧时间
      timeLeft: 0, //左侧时间
      clearset: null, //定时器
      stars: 1,
      show: false,
      comments: "",
      showcom: false,
    };
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    FullScreen() {
      this.toggleplay(); //自动播放
      this.timeRight = this.$refs.video.duration;
      this.MvDice = true;
    },
    toggleplay() {
      if (this.iconplay) {
        this.$refs.video.play(); //播放音乐
        clearInterval(this.clearset); //清除定时器
        this.clearset = setInterval(() => {
          let currentTime = this.$refs.video.currentTime; //实时变化时间
          let duration = this.$refs.video.duration; //总时间
          this.timeLeft = currentTime;
          // 计算滚动条值
          this.value = (currentTime / duration) * 100;
          if (this.value == 100) {
            clearInterval(this.clearset);
            this.$refs.video.pause(); //暂停音乐
            this.iconplay = true;
          }
        }, 999);
      } else {
        this.$refs.video.pause(); //暂停音乐
        clearInterval(this.clearset);
      }

      this.iconplay = !this.iconplay; //切换
    },
    // 获取滚动条变化
    sliderchange() {
      var duration = (this.$refs.video.duration * this.value) / 100;
      this.timeLeft = duration; //修改页面数据
      this.$refs.video.currentTime = duration; //修改播放时间
    },
    trun() {
      this.MvDice = false;
      this.toggleplay();
      document.webkitExitFullscreen();
    },
    delCollectionMV() {
      getCollectionmvplay(this.mvplayerId, 2).then((data) => {
        if (data.code === 200) {
          this.stars = 1;
          Toast("已取消收藏");
        }
      });
    },
    CollectionMV() {
      getCollectionmvplay(this.mvplayerId, 1).then((data) => {
        if (data.code === 200) {
          this.stars = 2;
          Toast("收藏成功");
        }
      });
    },
  },
  watch: {
    mvplayerId() {
      getmvplay(this.mvplayerId).then((data) => {
        this.mv = data.data;
      });
      console.log(this.mvplayerId);
      this.stars = 1;
      getMVComment(this.mvplayerId).then((data) => {
        this.comments = data.comments;
      });
    },
  },
  filters: {
    playerTime(data) {
      let m = parseInt(data / 60); //分钟
      let s = parseInt(data % 60); //秒
      if (m == 0 && s == 0) {
        return "0:00";
      } else {
        return m + ":" + (s < 10 ? "0" + s : s); // 01
      }
    },
  },
};
</script>

<style lang="less" scoped>
.mvplayer {
  position: relative;
  top: 0;
  video::-webkit-media-controls {
    display: none !important; //隐藏播放控件
    position: relative;
  }
  video {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .back {
    font-size: 18px;
    position: absolute;
    left: 12px;
    top: 12px;
    color: #fff;
    z-index: 1;
  }
  .range {
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: 110px;
    text-align: center;
    color: #fff;
    .bar {
      width: 66%;
      margin: auto;
      position: relative;
      font-size: 14px;
      .timeLeft {
        position: absolute;
        left: -34px;
        top: -6px;
      }
      .timeRight {
        position: absolute;
        right: -34px;
        top: -6px;
      }
    }
  }
  .buttons {
    display: flex;
    position: absolute;
    bottom: 40px;
    width: 100%;
    .iconfont {
      flex: 1;
      width: 20%;
      text-align: center;
      font-size: 24px;
      line-height: 38px;
      color: #fff;
    }
  }
}
.comment {
  position: absolute;
  bottom: 0;
  width: 100%;

  .van-cell {
    background-color: #000;
  }
}
.comment {
  width: 100%;
  height: 100%;
  overflow: auto;
  position: relative;
  background-color: #fff;
  z-index: 100;
  padding-top: 34px;
  .left {
    position: absolute;
    top: 10px;
    left: 8px;
    font-size: 20px;
    color: #000;
    z-index: 101;
  }
  li {
    display: flex;
    position: relative;
    padding: 10px 16px;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    box-sizing: border-box;
    .imgbox {
      width: 45px;
      height: 45px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .one,
    .two {
      position: absolute;
      font-size: 10px;
    }
    .one {
      left: 66px;
      top: 6px;
    }
    .two {
      right: 6px;
      bottom: 0px;
    }
  }
  p {
    padding: 15px 5px 5px 5px;
    width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>